<template>
	<view class="scroll-label">
		<scroll-view
			scroll-x="true"
			:scroll-with-animation="true"
			class="scroll-view"
			:scroll-into-view="tid"
		>
			<view
				v-for="(item,index) in lbList"
				:key='index'
				class="scroll-icon"
				:id="'text'+index"
				@click="changeColor(index)"
				:class="[indexs == index ? 'active' :'']"
			>
				{{item.title}}
			</view>
		</scroll-view>
	</view>
</template>
<script>
export default {
  data() {
    return {
      indexs: 0,
      lbList: [
        { title: '提娜汀' },
        { title: '提娜汀' },
        { title: '提娜汀' },
        { title: '提娜汀' },
      ],
      tid: ''
    }
  },
  methods: {
     	changeColor(e) {
      this.indexs = e
      this.tid = 'text' + e
    },
  }

}
</script>
<style lang="scss" scoped>
  .scroll-view{white-space: nowrap;padding: 0 4%;}
	.scroll-icon{display: inline-block;padding:1rem;}
	.active{position: relative;}
	.active::after{position: absolute;content: '';width: 40rpx;height: 4rpx;background-color: #FE3B0F;bottom: 22rpx;left: 50%;transform: translateX(-50%);}
</style>
